<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Cuber</title>
    <meta charset="GBK"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/uniform.css"/>
    <link rel="stylesheet" href="css/select2.css"/>
    <link rel="stylesheet" href="css/maruti-style.css"/>
    <link rel="stylesheet" href="css/maruti-media.css" class="skin-color"/>

    <link href="./echarts/asset/css/font-awesome.min.css" rel="stylesheet">

    <script src="./echarts/asset/js/esl/esl.js"></script>

    <script type="text/javascript" src="./ichart/ichart.1.2.min.js"></script>
</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">Maruti Admin</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-messaages-->
<div class="btn-group rightzero"><a class="top_message tip-left" title="Manage Files"><i class="icon-file"></i></a> <a
        class="top_message tip-bottom" title="Manage Users"><i class="icon-user"></i></a> <a
        class="top_message tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span
        class="label label-important">5</span></a> <a class="top_message tip-bottom" title="Manage Orders"><i
        class="icon-shopping-cart"></i></a></div>
<!--close-top-Header-messaages-->

<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
    <ul class="nav">
        <li class=""><a title="" href="#"><i class="icon icon-user"></i> <span class="text">Profile</span></a></li>
        <li class=" dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages"
                                                    class="dropdown-toggle"><i class="icon icon-envelope"></i> <span
                class="text">Messages</span> <span class="label label-important">5</span> <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a class="sAdd" title="" href="#">new message</a></li>
                <li><a class="sInbox" title="" href="#">inbox</a></li>
                <li><a class="sOutbox" title="" href="#">outbox</a></li>
                <li><a class="sTrash" title="" href="#">trash</a></li>
            </ul>
        </li>
        <li class=""><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">Settings</span></a></li>
        <li class=""><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">Logout</span></a>
        </li>
    </ul>
</div>

<!--close-top-Header-menu-->

<div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-th-list"></i> Tables</a>
    <ul>
        <li class="active"><a href="index.html"><i class="icon icon-home"></i> <span>商户数据</span></a></li>
        <li><a href="charts.html"><i class="icon icon-signal"></i> <span>商户数据</span></a></li>
        <li><a href="widgets.html"><i class="icon icon-inbox"></i> <span>网站数据</span></a></li>
        <li><a href="widgets.html"><i class="icon icon-inbox"></i> <span>应用数据</span></a></li>
        <li class="submenu"><a href="#"><i class="icon icon-th-list"></i> <span>系统设置</span> <span
                class="label">3</span></a>
            <ul>
                <li><a href="form-common.html">管理员维护</a></li>
                <li><a href="form-common.html">自定义</a></li>
                <li><a href="form-validation.html">服务监控</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"><a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a
                href="#" class="current">车源数据</a></div>
        <h1>新增商户数量</h1>
    </div>

    <!-- 上架车源显示开始 -->
    <script type="text/javascript">
        var swidth = screen.availWidth;
        $(function () {
            var flow = [];
            for (var i = 0; i < 21; i++) {
                flow.push(Math.floor(Math.random() * (30 + ((i % 12) * 5))) + 10);
            }

            var data = [
                {
                    name: 'PV',
                    value: flow,
                    color: '#0d8ecf',
                    line_width: 2
                }
            ];

            var labels = ["2012-12-01", "2012-12-02", "2012-12-03", "2012-12-04", "2012-12-05", "2012-12-06"];

            var line = new iChart.LineBasic2D({
                render: 'canvasDiv',
                data: data,
                align: 'center',
                title: '',
                subtitle: '',
                footnote: '',
                width: swidth * 0.67 - 65,//0.8
                height: 380,//0.4
                sub_option: {
                    smooth: true,//平滑曲线
                    point_size: 10
                },
                tip: {
                    enable: true,
                    shadow: true
                },
                legend: {
                    enable: false
                },
                crosshair: {
                    enable: true,
                    line_color: '#62bce9'
                },
                coordinate: {
                    width: swidth * 0.67 - 150,//0.6
                    valid_width: (swidth * 0.67 - 150) * (5 / 6),//0.5
                    height: 280,//0.26
                    axis: {
                        color: '#9f9f9f',
                        width: [0, 0, 2, 2]
                    },
                    grids: {
                        vertical: {
                            way: 'share_alike',
                            value: 12
                        }
                    },
                    scale: [{
                        position: 'left',
                        start_scale: 0,
                        end_scale: 100,
                        scale_space: 10,
                        scale_size: 2,
                        scale_color: '#9f9f9f'
                    }, {
                        position: 'bottom',
                        labels: labels
                    }]
                }
            });
            //开始画图
            line.draw();
        });

    </script>

    <!--- 饼状图 及 各接口车源显示 ------------------------------------------------------------------------------------------------start-->
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span8" style="padding-top:15px;">
                <div id='canvasDiv'></div>
            </div>
            <div class="span4">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"><i class="icon-file"></i></span>
                        <h5>在售车源数据分析</h5>
                        <div class="controls " >
                            <div class="select2-container" id="s2id_autogen1" >
                                <div class="select2-drop select2-with-searchbox select2-drop-active select2-offscreen"
                                     style="display: block; ">
                                    <div class="select2-search" style="margin-top:3px;">
                                        <input type="text" class="select2-input" autocomplete="off" tabindex="0"></div>
                                    <ul class="select2-results"></ul>
                                </div>
                            </div>
                            <select style="display: none;width: 156px;" >
                                <option>按商户类型</option>
                                <option>按优质商户</option>
                            </select>
                        </div>

                    </div>
                    <!-- 引入echarts图表开始 -->
                    <div class="featurette">
                        <div class="echarts-row">
                            <div style="border-bottom:1px solid #cdcdcd;" class="col-md-12" id="graphic">
                                <div style="height: 340px; width: 100%; background-color: transparent; cursor: default;"
                                     id="main" _echarts_instance_="1440342989654">
                                    <div style="position: relative; overflow: hidden; width: 942px; height: 400px;">
                                        <div style="position: absolute; left: 0px; top: 0px; width: 942px; height: 400px;"
                                             data-zr-dom-id="bg" class="zr-element"></div>
                                        <canvas style="position: absolute; left: 0px; top: 0px; width: 942px; height: 400px;"
                                                width="942" height="400" data-zr-dom-id="0" class="zr-element"></canvas>
                                        <canvas style="position: absolute; left: 0px; top: 0px; width: 942px; height: 400px;"
                                                width="942" height="400" data-zr-dom-id="1" class="zr-element"></canvas>
                                        <canvas style="position: absolute; left: 0px; top: 0px; width: 942px; height: 400px;"
                                                width="942" height="400" data-zr-dom-id="_zrender_hover_"
                                                class="zr-element"></canvas>
                                        <div class="echarts-tooltip zr-element"
                                             style="position: absolute; display: none; border-style: solid; white-space: nowrap; transition: left 0.4s ease 0s, top 0.4s ease 0s; background-color: rgba(0, 0, 0, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); padding: 5px; left: 513px; top: 60px;">
                                            浏览器（数据纯属虚构） <br>Chrome : 208 (7.62%)
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                    </div>
                    <!--/.fluid-container-->
                    <!-- Placed at the end of the document so the pages load faster -->
                    <script src="./echarts/asset/js/jquery.min.js"></script>
                    <script src="./echarts/asset/js/bootstrap.min.js"></script>
                    <script type="text/javascript">
                        require.config({
                            packages: [
                                {
                                    name: 'echarts',
                                    location: './echarts',
                                    main: 'echarts'
                                },
                                {
                                    name: 'zrender',
                                    location: 'http://ecomfe.github.io/zrender/src',
                                    //location: '../../../zrender/src',
                                    main: 'zrender'
                                }
                            ]
                        });

                        var idx = 1;
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                x: 'left',
                                data: ['个人', '中介', '厂商', '经销商', '第三方']
                            },
                            toolbox: {
                                show: false,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    magicType: {
                                        show: true,
                                        type: ['pie', 'funnel'],
                                        option: {
                                            funnel: {
                                                x: '25%',
                                                width: '50%',
                                                funnelAlign: 'center',
                                                max: 1548
                                            }
                                        }
                                    },
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            calculable: true,
                            series: [
                                {
                                    name: '个人',
                                    type: 'pie',
                                    radius: ['50%', '70%'],
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: false
                                            },
                                            labelLine: {
                                                show: false
                                            }
                                        },
                                        emphasis: {
                                            label: {
                                                show: true,
                                                position: 'center',
                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        }
                                    },
                                    data: [
                                        {value: 335, name: '个人'},
                                        {value: 310, name: '中介'},
                                        {value: 234, name: '经销商'},
                                        {value: 135, name: '第三方'},
                                        {value: 1548, name: '厂商'}
                                    ]
                                }
                            ]
                        };
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/pie',
                                    'echarts/chart/bar'
                                ],
                                function (ec) {
                                    var myChart = ec.init(document.getElementById('main'));
                                    myChart.setOption(option);
                                }
                        )
                    </script>
                    <!--- 引入echarts图表结束 -->

                </div>
            </div>
        </div>
    </div>

    <!--- test ------------------------------------------------------------------------------------------------end-->

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
                        <h5>TOP10商户数据统计 &nbsp;&nbsp;&nbsp;<a href="more.html">More>></a></h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>商户名称</th>
                                <th>是否优质商户</th>
                                <th>昨日上架车源数量</th>
                                <th>昨日下架车源数量</th>
                                <th>最近一周上架车源数量</th>
                                <th>最近一周下架车源数量</th>
                                <th>最近一月上架车源数量</th>
                                <th>最近一月下架车源数量</th>
                                <th>商户电话量</th>
                                <th>在售车源数量</th>
                                <th>昨日车源点击次数</th>
                                <th>昨日登录次数</th>
                                <th>本周投诉次数</th>
                                <th>本月投诉次数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="odd gradeX">
                                <td>北京卓杰行</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京卓杰行</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京卓杰行</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京牛车网</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京第一车网</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京卓杰行</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京车易得</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京卓杰行</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京大搜车</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>杭州车猫网</td>
                                <td>是</td>
                                <td>1200</td>
                                <td>630</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">13000</td>
                                <td class="center">8000</td>
                                <td class="center">20</td>
                                <td class="center">20</td>
                                <td class="center">5</td>
                                <td class="center">10</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
                        <h5>TOP10地区商户数据统计 &nbsp;&nbsp;&nbsp;<a href="more.html">More>></a></h5>
                    </div>
                    <div class="widget-content nopadding">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>地区</th>
                                <th>昨日新增商户数量</th>
                                <th>最近一周新增商户数量</th>
                                <th>最近一月新增商户数量</th>
                                <th>优质商户数量</th>
                                <th>商户总数量</th>
                                <th>平均商户每日登录次数</th>
                                <th>平均商户每月投诉次数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="odd gradeX">
                                <td>全国</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>北京</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>河北</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>江苏</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>辽宁</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>上海</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>山东</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>重庆</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>深圳</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            <tr class="odd gradeX">
                                <td>河北</td>
                                <td>12</td>
                                <td>30</td>
                                <td>50</td>
                                <td class="center">120</td>
                                <td class="center">220</td>
                                <td class="center">10</td>
                                <td class="center">3</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div id="footer" class="span12"> 2015 &copy; Marutii Admin. More Templates <a href="http://www.seamtop.com/"
                                                                                  target="_blank"
                                                                                  title="徙木科技">徙木科技</a> - Collect from
        <a href="#" title="" target="_blank">企业数据化运营服务提供商</a></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.uniform.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/maruti.js"></script>
<script src="js/maruti.tables.js"></script>
</body>
</html>
